<template>
  <div class="banner">
    <el-carousel class="carousel">
      <el-carousel-item v-for="(item, index) in carouselList" :key="index">
        <a :href="item.carouselUrl" :title="item.carouselTitle" :target="item.carouselTarget === 1 ? '_blank' : '_self'">
          <el-image :src="item.carouselImg" :alt="item.carouselTitle" />
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup>
  const carouselList = ref([
    {
      carouselTitle: '关于我们',
      carouselUrl: '/about',
      carouselImg: 'https://weavecode.oss-cn-hangzhou.aliyuncs.com/education/78ec22d9ace949f280c1e1e3700d6a7e.png',
      carouselTarget: 1
    }
  ])
</script>
<style lang="scss" scoped>
  .banner {
    position: relative;
    width: 1200px;
    display: flex;
    margin: 20px auto;
    justify-content: space-between;
    .carousel {
      width: 100%;
    }
  }
</style>
